<template>
    <div class="home2_bottom">
		<div class="home2_zxzx">
			<div class="home2_zxzx_title">
				<div class="subtitle"><span></span>我的待办</div>
				<div class="home2_zxzx_ckgd" style="cursor: pointer" @click="gotoWorkBench">前往工作台</div>
			</div>
			<zh-row :gutter="20" v-if="state.wddbList&&state.wddbList.length>0">
				<zh-col :span="8" v-for="(item, index) in state.wddbList" :key="index">
					<div  class="home2_zxzx_con_item" @click="handleClickTitle(item)">
						<div>
							<span class="point" :style="{ backgroundColor: item.showSign == 'true' ? '#F6B13F' : '#516EFF' }"></span>
							{{ item.processName }}
						</div>
						<div class="home2_zxzx_con_item_con">
							<div class="content">{{ item.fullName }}</div>
							<div class="time">{{ item.createTime ? String(item.createTime).slice(0, 10) : '时间丢失' }}</div>
						</div>
					</div>
				</zh-col>
			</zh-row>
			<div  class="home2_zxzx_con_item" v-else>
				<el-empty :image-size="50" description="您还没有待办事项"/>
			</div>
          
		</div>

      <flow-detail-drawer
          :visible="visible"
          :instance-id="state.currentInstanceId"
          :business-key="state.currentBusinessKey"
          :instance-state="state.instanceState"
          :process-type="state.processType"
          @update:modelValue="
        (val) => {
          return (visible = val);
        }
      "
          @refresh="refreshList"
      />

      <wt-task-detail-drawer
          :visible="state.wtTaskDetailDrawer"
          @update:modelValue="drawerForClose"
          :wtTaskAllocationId="state.wtTaskAllocationId"
          :createOrAssignPerson="2"
      ></wt-task-detail-drawer>

	</div>
</template>
<script lang="ts" setup name="myToDoListPage">
import flowDetailDrawer from '@/views/system/workflow/flowTask/component/flowDetailDrawer.vue';
import wtTaskDetailDrawer from '@/views/system/wtTask/component/wtTaskDetailDrawer.vue';
import { ref,onMounted,nextTick } from "vue";
//------------------内部变量定义-------------------------
const visible = ref(false);
const state = reactive({
	wddbList: [] as any,
	// 查询参数
	queryParam: {
		docType: "1",
		businessScope: 1,
		pageNum:1,
		pageSize:12
	} as any,
  currentInstanceId: '',
  currentBusinessKey: undefined,
  instanceState: undefined,
  processType: undefined,
  wtTaskDetailDrawer: false,
  wtTaskAllocationId: undefined
});
const router = useRouter();
//------------------定义调用方法-------------------------
//查询待办事项
const getToDoList = () => {
  $api.common.send.post('flowLongQuery005', state.queryParam).then((res) => {
    state.wddbList = res.result.list;
  });
}
const init = () => {
  getToDoList();
};
//前往工作台
const gotoWorkBench = () => {
	router.push({path: "/workBench"});
};
//打开待办详情
const handleClickTitle = (row) => {
  if(row.processType === 3){
    //跳转
    // router.push({path: '/system/wtTask',query: {taskId: row.processKey.replace("wtTask#","")}});
    state.wtTaskAllocationId = row.businessKey.replace("wtTaskAllocation#","");
    state.wtTaskDetailDrawer = true;
    return;
  }
  state.currentInstanceId = String(row.id);
  state.currentBusinessKey = row.businessKey;
  state.instanceState = row.instanceState;
  state.processType = row.processType;
  visible.value = true;
}
function drawerForClose(val) {
  state.wtTaskDetailDrawer = val;
  if(val === false){
    refreshList();
  }
}
function refreshList() {
  visible.value = false
  getToDoList();
}
//-------------------------初始化-----------------------------
onMounted(() => {
	nextTick(() => {
		if(state.wddbList.length>0){
			return
		}
		init();
	});
});
</script>
<style scoped lang="scss">
.subtitle {
	font-family: PingFangSC-Regular;
	font-size: 18px;
	color: rgba(0, 0, 0, 0.85);
	letter-spacing: 0;
	line-height: 22px;
	display: flex;
	align-items: center;

	span {
		display: inline-block;
		width: 5px;
		height: 18px;
		margin-right: 8px;
		background-color: #1868fd;
	}
}
.home2 {
	&_bottom {
		margin: 0 24px 24px;
		display: flex;
		width: calc(100% - 48px);
	}
    &_zxzx {
		width: 100%;

		&_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&_ckgd {
			font-size: 1rem;
			color: #1868fd;
			display: flex;
			align-items: center;
		}

		&_con {
			&_item {
				background-image: linear-gradient(-75deg, rgba(24, 104, 253, 0.027) 0%, rgba(24, 104, 253, 0.05) 100%);
				border-radius: 4px;
				padding: 10px 20px 10px 20px;
				font-size: 16px;
				color: #333333;
				font-weight: 500;
				margin: 20px 0 0 0;

				.point {
					width: 9px;
					height: 9px;
					display: inline-block;
					border-radius: 50%;
					margin-right: 8px;
				}

				&_con {
					margin-top: 14px;
					margin-left: 17px;
					font-size: 14px;
					font-weight: 400;
					display: flex;
					justify-content: space-between;

					.content {
						width: 60%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.time {
						color: #999999;
					}
				}
			}
		}
	}
    &_wddb {
		width: 100%;
		background: #ffffff;
		box-shadow: 0rem 0.29rem 0.71rem 0rem rgba(0, 34, 98, 0.05);
		border-radius: 0.29rem;
		flex: none;
		padding: 1.71rem 1.71rem 1rem;

		&_title {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&_ckgd {
			font-size: 1rem;
			color: #1868fd;
			display: flex;
			align-items: center;
			cursor: pointer;
		}

		.subtitle {
			margin-bottom: 0.98rem;
			padding-bottom: 1.14rem;
			border-bottom: 1px solid rgba(232, 232, 232, 1);
		}

		&_con {
			&_item {
				background-image: linear-gradient(-75deg, rgba(24, 104, 253, 0.027) 0%, rgba(24, 104, 253, 0.05) 100%);
				border-radius: 7px;
				padding: 1.14rem 1.71rem 1.43rem 1.14rem;
				margin-top: 0.86rem;
				width: 24.36rem;
				overflow-y: scroll;

				span {
					display: inline-block;
					width: 6px;
					height: 6px;
					background: #1868fd;
					border-radius: 7px;
					margin-right: 8px;
				}

				.con {
					margin-top: 10px;
					margin-left: 16px;
					display: flex;
					justify-content: space-between;
					font-family: PingFangSC-Regular;
					font-size: 1rem;
					color: #666660;

					&_time {
						color: #888888;
					}
				}
			}
		}
	}
}
</style>